import useStore from "./stores/user"
const homeComponent = {
    data() {
        return {
            name: "家庭财务管理系统"
        }
    },
    template: `
    <div class="row ">
        <div class="col center homecomponent text-center ">
            欢迎使用{{name}}<br>请在导航栏或下方选择您想要使用的功能。
        </div>
        <div class="container homecomponent" id="function">
         <div class="row row-cols-3">
            <div class="col">
               <img src="/accounts.png" class="rounded mx-auto d-block" alt="accounts" width="128" height="128" @click="$emit('switch-to', 'userProfile')">
             <p class="display-6 text-center">  accounts</p>
            </div>
            <div class="col">
               <img src="/management.png" class="rounded mx-auto d-block" alt="management" width="128" height="128" @click="$emit('switch-to', 'allBills')">
             <p class="display-6 text-center">  management</p>
            </div>
            <div class="col">
              <img src="/reportforms.png" class="rounded mx-auto d-block" alt="reportforms" width="128" height="128" @click="$emit('switch-to', 'addBill')">
             <p class="display-6 text-center">  reportforms</p>
            </div>
         </div>
        </div>
    </div>
    `
};

const userProfileComponent = {
    data() {
        return {
            profileList: {
                Name: "zmx",
                Age: 14,
            }
        }
    },
    methods: {
        updateProfileList() {
            $.getJSON("/cgi-bin/user-profile.py", function (data, status) {
                this.profileList = data
            }.bind(this))
        }
    },
    mounted() {
        this.updateProfileList()
    },
    template: `
    <div class=" center mt-3">
        <table class="table table-hover   bg-white userprofileall">
            <colgroup>
                <col>
                <col>
            </colgroup>
            <tbody>

                <tr class=" userprofiletitle  userstart">
                    <th scope="col">键名</th>
                    <th scope="col">值</th>
                </tr>

                <tr scope="row" v-for="(v, k) in profileList" class="table-white userprofilecontent">
                    <th><small>{{k}}</small></th><th><small>{{v}}</small></th>
                </tr>
            </tbody>
        </table>
        
    </div>
    `
}

const allBillsComponent = {
    setup() {
        var store = useStore()
        return {store}
    },
    data() {
        return {
            profileList: [{
                amount: "123.00",
                time: 0,
                data: 0,
                comment: 0,
                category: 0,
            }]
        }
    },
    methods: {
        updateProfileList() {
            var _this = this
            $.post("/api/bill", {bill_name: this.store.username},function (data, status) {
                this.profileList = data
            }.bind(this), "json")
        },
        deleteBill(number) {
            $.post("/api/deletebill", { uuid: number }, function () {
                this.updateProfileList()
            }.bind(this))
            this.updateProfileList()
        }
    },
    mounted() {
        this.updateProfileList();
    },
    template: `
    <div class="center  mt-1  p-3  tabless">
        <table class="table table-hover   bg-white userprofileall">
            <tbody>
                <tr class=" userprofiletitle   userstart">
                    <th scope="col">账单序号</th>
                    <th scope="col">账单名</th>
                    <th scope="col">交易时间</th>
                    <th scope="col">交易金额</th>
                    <th scope="col">交易类型</th> 
                    <th scope="col">操作</th>
                </tr>
                <tr scope="row" v-for="(v, k) in profileList" class="table-white userprofilecontent">
                    <th v-for="(v,k) in profileList[k]">{{v}}</th>
                    <th><button class="btn btn-primary btn-sm" type="button" @click="deleteBill(profileList[k].uuid)">delete</button></th>
                </tr>
            </tbody>
        </table>

    </div>
    `
}

const addBillComponent = {
    setup() {
        var store = useStore()
        return {store}
    },
    data() {
        return {
            categoryList: ["食品、饮料、烟草类", "服装和鞋类", "租金总额、燃料、动力", "家具、陈设品、家庭设备和管理", "医疗和保健费用", "运输和通讯", "娱乐、教育和文化服务", "杂项用品和服务"],
            billDetail: {
                bill_name: this.store.username,
                bill_type: "income"
            },
        }
    },
    methods: {
        uploadNewBill() {
            $.post("/api/addbill", this.billDetail, function (data) {
                if (data.code === "success") {
                    alert("添加成功")
                } else {
                    alert("添加失败")
                }
            })
            return 0;
        }
    },
    template: `
    <div class=" center mt-1  p-2 rounded-3 bg-white billupload" >
        <form action="/api/addbill" method="POST">
            <div class="mb-5 mt-5 input-group   billselect justify-content-around">
                <span class="input-group-text" id="basic-addon1">金额</span>
                <input type="number" id="billAmount" name="amount" class="form-cotrol" placeholder="请输入金额" min=".01" step="0.01" required v-model="billDetail.bill_amount">
                <span class="input-group-text" id="basic-addon1">类别</span>
                <select id="billCategory" class="form-select" name="category" v-model="billDetail.bill_mode">
                    <option required v-for="category in categoryList">{{category}}</option>
                </select>
                <span class="input-group-text" id="basic-addon2"></span>
                <input type="datetime-local" class="form-control" name="datetime" step=1 v-model="billDetail.bill_time">
            </div>
            <div>
                <textarea id="billComment" class="form-control" rows="8" cols="40" maxlength="150" name="comment" placeholder="注释，不超过150字" v-model="billDetail.bill_notes"></textarea>
            </div>
            <div class="d-grid mt-3 gap-2 col-6 mx-auto">
                <button class="btn btn-primary" type="button" @click="uploadNewBill()">添加</button>
            </div>
        </form>
    </div>
    `
}

const allSecurityComponent = {
    setup() {
        var store=useStore()
        return {store}
    },
    data() {
        return {
            profileList: [{
                accountnumber:"1234567899999",
                securitycode:"300888",
                soldorbought:"sold",
                amounts:"5000",
                price:"4.8",
                date:"2022.07.20 11:11:11",
            },
            {
                accountnumber:"1234567811111",
                securitycode:"555999",
                soldorbought:"bought",
                amounts:"5000",
                price:"4.8",
                date:"2022.07.20 11:11:11",
            },
            {
                accountnumber:"1234567899999",
                securitycode:"300888",
                soldorbought:"sold",
                amounts:"12",
                price:"6.6",
                date:"2022.07.20 11:11:11",
            },
            {
                accountnumber:"1234567822222",
                securitycode:"3555999",
                soldorbought:"bought",
                amounts:"5555",
                price:"7.5",
                date:"2022.07.20 11:11:11",
            }
        ]
        }
    },
    methods: {
        updateSecurityList() {
            $.post("/api/security", {security_name: this.store.username}, function (data, status) {
                this.profileList = data
            }.bind(this), "json")
        },
        deleteSecurity(number) {
            $.post("/api/deletesecurity", { uuid: number }, function () {
                this.updateSecurityList()
            }.bind(this))
            this.updateSecurityList()
        }
    },
    mounted() {
        this.updateSecurityList();
    },
    template: `
    <div class="center  mt-3  p-3  tabless">
        <table data-toggle="table" data-search="true" data-pagination="true" class="table table-hover bg-white userprofileall">
            <tbody>
                <tr  class=" userprofiletitle   userstart">
                    <th scope="col">交易序号</th>
                    <th scope="col">证券名称</th>
                    <th scope="col">账户号</th>
                    <th scope="col">证券代码</th>
                    <th scope="col">买入/卖出</th>
                    <th scope="col">交易数量</th>
                    <th scope="col">交易价格</th>
                    <th scope="col">交易时间</th>
                    <th scope="col">交易备注</th>
                    <th scope="col">操作</th>
                </tr>
                <tr scope="row" v-for="(v, k) in profileList" class="table-white userprofilecontent">
                    <th v-for="(v,k) in profileList[k]">{{v}}</th>
                    <th><button class="btn btn-primary btn-sm" type="button" @click="deleteSecurity(profileList[k].uuid)">delete</button></th>
                </tr>
            </tbody>
        </table>

    </div>
    `
}

const addSecurityComponent = {
    setup() {
        var store=useStore()
        return {store}
    },
    data() {
        return {
            categoryList: ["买", "卖"],
            securityDetail: {
                security_name: this.store.username
            },
        }
    },
    methods: {
        uploadNewSecurity() {
            $.post("/api/addsecurity", this.securityDetail, function (data) {
                if (data.code === "success") {
                    alert("添加成功")
                } else {
                    alert("添加失败")
                }
            })
        }
    },
    template: `
    <div class=" center mt-3  p-3 rounded-3 bg-white billupload" >
        <form action="/api/addsecurity" method="POST">
            <div class="mb-3 mt-3 input-group  billselect justify-content-around">
                <span class="input-group-text" id="basic-addon1">证券账户号码</span>
                <input type="text" id="billAmount" name="securityAccountNumber" class="form-control" placeholder="请输入证券账户号码" required v-model="securityDetail.security_number">
                <span class="input-group-text" id="basic-addon1">证券代码</span>
                <input type="text" id="billAmount" name="securityCode" class="form-control" placeholder="请输入证券代码" required v-model="securityDetail.security_code">
            </div>
            <div class="mb-1 mt-1 input-group   billselect justify-content-around">
                <span class="input-group-text" id="basic-addon1">买卖方向</span>
                <select id="billCategory"  class="form-select" name="direction" v-model="securityDetail.security_direction">
                    <option required v-for="category in categoryList">{{category}}</option>
                </select>
                <span class="input-group-text" id="basic-addon1">证券数量</span>
                <input type="number" id="billAmount" name="amount" class="form-control" placeholder="请输入证券数量" required min="0" max="10000" v-model="securityDetail.security_amount">
            </div>
            <div class="mb-3 mt-3 input-group   billselect justify-content-around">
                <span class="input-group-text" id="basic-addon1">证券价格</span>
                <input type="number" id="billAmount" name="price" class="form-control" placeholder="请输入证券价格" required min="0" max="10000" step=".01" v-model="securityDetail.security_price">
                <span class="input-group-text" center id="basic-addon2">交易时间</span>
                <input type="datetime-local" class="form-control" name="datetime" step=1 v-model="securityDetail.security_time">
            </div>
            <div>
                <textarea id="billComment" class="form-control" rows="8" cols="40" maxlength="150" name="comment" placeholder="注释，不超过150字" v-model="securityDetail.security_notes"></textarea>
            </div>
            <div class="d-grid mt-3 gap-2 col-6 mx-auto">
                <button class="btn btn-primary" type="button" @click="uploadNewSecurity()">添加</button>
            </div>
        </form>
    </div>
    `
}

const aboutComponent = {
    template: `
    <div class="text-align-center col-6">
        <h5>家庭财务管理系统</h5>
        <h5>Developed by 华中科技大学甘孜理塘 2022 &copy; Copyright</h5>
    </div>
    `
}

const componentsList = {
    home: homeComponent,
    userProfile: userProfileComponent,
    allBills: allBillsComponent,
    addBill: addBillComponent,
    allSecurity: allSecurityComponent,
    addSecurity: addSecurityComponent,
    about: aboutComponent,

}

export default componentsList;
